<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />

        <div class="main  container" style="display: flex;justify-content: center;">

            <div class="center">
                <div class=" container-wedao" v-if="BzData">
                    <div class="pg-10 pt-20">
                        <div class="top-row-label un-even">
                            姓名：
                            <span class="top-row-content">
                                {{ BzData.USER.name }}
                            </span>
                            <span class="top-row-content" style="margin-left: 10px">
                                {{ BzData.USER.xmwx }}
                            </span>
                            <span class="top-row-content" style="margin-left: 10px; color: #006600">
                                {{ BzData.USER.gx }}
                            </span>
                        </div>
                        <div class="top-row-label even">
                            性别：
                            <span class="top-row-content">{{ BzData.USER.sexx }}</span>
                        </div>
                        <div class="top-row-label un-even">
                            排盘方式：
                            <span class="top-row-content">{{ BzData.USER.PPFS }}</span>
                        </div>

                        <div class="top-row-label even">
                            公历：
                            <span class="top-row-content">{{ BzData.Cs.gongli }}</span>
                        </div>
                        <div class="top-row-label un-even">
                            农历：
                            <span class="top-row-content">{{ BzData.Cs.nongli }}</span>
                        </div>
                        <div class="top-row-label even">
                            强弱分析：
                            <span class="top-row-content">{{ BzData.Qr }}</span>
                        </div>
                        <div class="top-row-label un-even">
                            格局分析：
                            <span class="top-row-content">{{ BzData.GJ }}</span>
                        </div>
                        <div class="top-row-label even">
                            燥湿分析：
                            <span class="top-row-content">{{ BzData.Zs }}</span>
                        </div>
                        <div class="top-row-label un-even">
                            喜用神：
                            <span class="top-row-content">{{ BzData.Xys }}</span>
                        </div>
                        <div class="top-row-label even">
                            五行旺衰：
                            <span class="top-row-content">{{ BzData.Wxsw }}</span>
                        </div>
                        <div class="top-row-label un-even">
                            平衡法&调候法喜用神分析：
                            <span class="top-row-content">{{ BzData.PhXys }}</span>
                        </div>

                    </div>
                    <div class="bgmt-20 pg-10">

                        <div ref="table" class="uni-table">
                            <div class="uni-table-th" style="font-size: 24px;">
                                <div class=" uni-th itt">四柱</div>
                                <div class="uni-td itt">年柱</div>
                                <div class="uni-td itt">月柱</div>
                                <div class="uni-td itt">日柱</div>
                                <div class="uni-td itt">时柱</div>
                            </div>
                            <div class="uni-tr">
                                <div class="uni-th">
                                    <div style="text-align: center">十神</div>
                                </div>
                                <div class="uni-td" style="font-size: 14px; font-weight: bold;text-align: center"
                                    v-for="(item, index) in BzData.ShiShen" :key="index">
                                    <div class="itt" :style="'color:' + item.color">{{ item.text }}</div>
                                </div>
                            </div>
                            <div class="uni-tr">
                                <div class="uni-th">
                                    <div class="">天干</div>
                                </div>
                                <div class="uni-td" style="font-size: 24px; font-weight: bold"
                                    v-for="item in BzData.TianGan">
                                    <div class="itt" :style="'color:' + item.color">{{ item.text }}</div>
                                </div>
                            </div>
                            <div class="uni-tr">
                                <div class="uni-th">
                                    <div>地支</div>
                                </div>
                                <div class="uni-td" style="font-size: 24px; font-weight: bold" :key="index"
                                    v-for="(item, index) in BzData.DiZhi">
                                    <div class="itt" :style="'color:' + item.color">{{ item.text }}</div>
                                </div>

                            </div>
                            <div class="uni-tr" style="height: 100px;">
                                <div class="uni-th">
                                    <div>藏干</div>
                                </div>
                                <div class="uni-td">
                                    <div style="font-size: 24px; font-weight: bold" :key="index"
                                        v-for="(item, index) in BzData.CangGan[0]" class="txt_canggan"
                                        :style="'color:' + item.color">
                                        <span>{{ item.text }}</span>
                                        <span class="txt_fuxing">{{ item.cg }}</span>
                                    </div>
                                </div>
                                <div class="uni-td">
                                    <div style="font-size: 24px; font-weight: bold" :key="index"
                                        v-for="(item, index) in BzData.CangGan[1]" class="txt_canggan"
                                        :style="'color:' + item.color">
                                        <span>{{ item.text }}</span>
                                        <span class="txt_fuxing">{{ item.cg }}</span>
                                    </div>
                                </div>
                                <div class="uni-td">
                                    <div style="font-size: 24px; font-weight: bold" :key="index"
                                        v-for="(item, index) in BzData.CangGan[2]" class="txt_canggan"
                                        :style="'color:' + item.color">
                                        <span>{{ item.text }}</span>
                                        <span class="txt_fuxing">{{ item.cg }}</span>
                                    </div>
                                </div>
                                <div class="uni-td">
                                    <div style="font-size: 24px; font-weight: bold" :key="index"
                                        v-for="(item, index) in BzData.CangGan[3]" class="txt_canggan"
                                        :style="'color:' + item.color">
                                        <span>{{ item.text }}</span>
                                        <span class="txt_fuxing">{{ item.cg }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chartsMain">

                        <qiun-vue-ucharts type="pie" :opts="opts" :chartData="chartData" />
                        <div class="lengend">
                            <div class="" style="width: 48%;margin: 18px;">
                                <div class="left" v-for="(item, i) in jingLuoDataFirstSix">
                                    <div class="content">
                                        <div class="color" :style="{ background: item.color }">

                                        </div>
                                        <div class="text">
                                            {{ item.name }}
                                        </div>
                                    </div>
                                    <div class="val">
                                        {{ item.value }}%
                                    </div>
                                </div>
                            </div>

                            <div class="" style="width: 48%;margin: 18px;">
                                <div class="right" v-for="(item, i) in jingLuoDataFirstshier">
                                    <div class="content">
                                        <div class="color" :style="{ background: item.color }">

                                        </div>
                                        <div class="text">
                                            {{ item.name }}
                                        </div>
                                    </div>
                                    <div class="val">
                                        {{ item.value }}%
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div v-else>
                    <el-empty description="没有排盘数据！请先进行排盘"></el-empty>
                </div>
                <div class="cl"></div>
            </div>



            <div class="cl"></div>

        </div>

    </div>

</template>

<script>
import qiunVueUcharts from '@qiun/vue-ucharts'

import { getBazi, wxNengLing } from "../../api/index";
const wuxColorMap = new Map([
    ['金', '#FFaa22'],
    ['木', '#309000'],
    ['水', '#0000dd'],
    ['火', '#dd0000'],
    ['土', '#7f7000'],
]);
const jLColorMap = new Map([
    ['手太阴肺经', '#dfbe83'],
    ['手阳明大肠经', '#fbdaa1'],
    ['足阳明胃经', '#dea784'],
    ['足太阴脾经', '#ffffff'],
    ['手少阴心经', '#ff4945'],
    ['手太阳小肠经', '#d50000'],
    ['足太阳膀胱经', '#4bbaff'],
    ['足少阴肾经', '#9cdfff'],
    ['手厥阴心包经', '#d4a1a1'],
    ['手少阳三焦经', '#e7b0b0'],
    ['足少阳胆经', '#77a853'],
    ['足厥阴肝经', '#a1d180'],
]);
export default {
    name: 'FullScreenIframe',
    components: {
        qiunVueUcharts
    },
    computed: {
        jingLuoDataFirstSix() {
            return this.jingLuoData.slice(0, 6);
        },
        jingLuoDataFirstshier() {
            return this.jingLuoData.slice(6);
        },
        currentPath() {
            return this.$route.path; // 获取当前路由路径
        },
    },

    data() {
        return {
            cWidth: 750,
            cHeight: 500,
            categoryList: [],
            buyItem: "",
            mylessonTotal: 0,

            swiperList: [

            ],
            list: [
                { sid: 0, src: '自定义src0', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 1, src: '自定义src1', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 2, src: '自定义src2', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 3, src: '自定义src3', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" }
            ],
            courseType: "",
            checkOne: false,
            checkTwo: true,
            checkThree: false,
            BzData: null,
            txtClass: {
                tiangan: ['txt-jin', 'txt-jin', 'txt-jin', 'txt-jin'],
                dizhi: ['txt-mu', 'txt-mu', 'txt-mu', 'txt-mu'],
                canggan: {
                    year: ['txt-mu', 'txt-huo', 'txt-tu'],
                    month: ['txt-jin', 'txt-shui', 'txt-tu'],
                    day: ['txt-shui', 'txt-mu'],
                    hour: ['txt-mu', 'txt-huo', 'txt-tu'],
                }
            },
            nengliangBar: null,
            nengliangBarData: {},


            // 五行个数数据
            wxNumData: [],
            // 五行能量数据
            wxNLData: [],

            // 十二经络
            jingLuoData: [],
            //
            wuxingNumScale: [],
            // 藏干
            cg: null,
            // 天干地支
            tgdz: null,
            baziData: "",
            chartData: {},
            opts: {
                color: ["#dfbe83", "#fbdaa1", "#dea784", "#ffffff", "#ff4945", "#d50000", "#4bbaff", "#9cdfff", "#d4a1a1", "#e7b0b0", "#77a853", "#a1d180",],
                padding: [5, 5, 5, 5],
                enableScroll: false,
                legend: {
                    show: false,

                },
                tooltip: {
                    show: true,
                },
                extra: {
                    pie: {
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 15,
                        border: true,
                        borderWidth: 3,
                        borderColor: "#FFFFFF"
                    }
                }
            }
        }
    },
    mounted() {

        this.getBazidata()
        this.getServerData()



    },
    created() {
        // this.init();
    },
    methods: {
        getServerData() {

            setTimeout(() => {
                //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
                let res = {
                    series: [
                        {
                            data: this.jingLuoData
                        }
                    ]
                };
                this.chartData = JSON.parse(JSON.stringify(res));
            }, 500);
        },

        tap(e) {
            console.log(e)
            uChartsInstance[e.target.id].touchLegend(e);
            uChartsInstance[e.target.id].showToolTip(e);
        },
        wxDataBuilder(wx, scale) {
            return {
                wxText: wx, // 金
                wxScale: scale / 10, // 35
                wxColor: wuxColorMap.get(wx),
            };
        },
        jLDataBuilder(jl, scale) {
            return {
                name: jl, // 金
                value: Number((scale / 10).toFixed(0)), // 35
                color: jLColorMap.get(jl),
                labelShow: false
            };
        },
        wxDataBuilder(wx, scale) {
            return {
                wxText: wx, // 金
                wxScale: scale / 10, // 35
                wxColor: wuxColorMap.get(wx),
            };
        },

        onChartReady(chart) {
            this.nengliangBar = chart;
        },




        getWuXing(str) {
            let wuxingMap = new Map([
                ['甲', '木'],
                ['乙', '木'],
                ['丙', '火'],
                ['丁', '火'],
                ['戊', '土'],
                ['己', '土'],
                ['庚', '金'],
                ['辛', '金'],
                ['壬', '水'],
                ['癸', '水'],
                ['子', '水'],
                ['丑', '土'],
                ['寅', '木'],
                ['卯', '木'],
                ['辰', '土'],
                ['巳', '火'],
                ['午', '火'],
                ['未', '土'],
                ['申', '金'],
                ['酉', '金'],
                ['戌', '土'],
                ['亥', '水'],
            ]);
            return wuxingMap.get(str);
        },

        getBazidata() {

            getBazi({}).then((res) => {
                console.log(res)
                if (res.code != 200) {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                    return;
                }



                const baziData1 = JSON.parse(res.data.data)
                console.log(baziData1.baziData, "1234567890")
                this.BzData = baziData1.baziData;
                const baziData = baziData1.baziData;

                this.cg = baziData.CG;
                // 金木水火土对应关系的方法
                this.tgdz = baziData.BZ;

                // 处理五行个数
                // 金木水火土，比例，天干地支，藏干
                // 天干地支对应标识
                let tgdzTag = ['ng', 'nz', 'yg', 'yz', 'rg', 'rz', 'sg', 'sz'];
                // 藏干对应标识
                let cgTag = [
                    'nbq',
                    'nyq',
                    'nzq',
                    'ybq',
                    'yyq',
                    'yzq',
                    'rbq',
                    'ryq',
                    'rzq',
                    'sbq',
                    'syq',
                    'szq',
                ];
                // 记录五行
                let wxList = [];
                let wxMap = new Map([
                    ['木', 0],
                    ['火', 0],
                    ['土', 0],
                    ['金', 0],
                    ['水', 0],
                ]);
                // 天干地支处理
                for (let tag of tgdzTag) {
                    // 获取相应的天干地支
                    console.log(this.tgdz, "ji")
                    let t = this.tgdz[tag];
                    let wuxing = this.getWuXing(t);
                    if (wuxing !== undefined) {
                        let wxNum = wxMap.get(wuxing);
                        wxMap.set(wuxing, wxNum + 1);
                        wxList.push(wuxing);
                    }
                }

                // 藏干处理
                for (let tag of cgTag) {
                    let c = this.cg[tag];
                    let wuxing = this.getWuXing(c);
                    if (wuxing !== undefined) {
                        let wxNum = wxMap.get(wuxing);
                        wxMap.set(wuxing, wxNum + 1);
                        wxList.push(wuxing);
                    }
                }
                // 求个数  用于个数
                let cc = 5; // 天干+地支+藏干共计20个。100/20 = 5
                for (let [wx, num] of wxMap) {
                    let data = {
                        wxText: wx, // 金
                        wxNumS: num * cc, // 35
                        wxNum: num, // 35
                        wxColor: wuxColorMap.get(wx),
                    };
                    this.wxNumData.push(data);
                }
                //天干地支数组获取
                let tianganArr = [];
                for (var i = 0; i < baziData.TianGan.length; i++) {
                    let txt = baziData.TianGan[i].text;
                    console.log(txt, '1')
                    tianganArr.push(txt);
                }
                let dizhiArr = [];
                for (var i = 0; i < baziData.DiZhi.length; i++) {
                    let txt = baziData.DiZhi[i].text;
                    console.log(txt, 2)
                    dizhiArr.push(txt);
                }

                let cangganArr = [];
                console.log(baziData.CangGan);
                for (var i = 0; i < baziData.CangGan.length; i++) {
                    // 藏干处理
                    let onGroupCg = baziData.CangGan[i];
                    let cg = [];
                    for (var j = 0; j < onGroupCg.length; j++) {
                        if (Object.keys(onGroupCg[j]).length !== 0) {
                            if (onGroupCg[j].text) {
                                cg.push(onGroupCg[j].text);
                            }

                        }
                    }
                    if (cg.length !== 0) {
                        console.log(cg, 4)
                        cangganArr.push(cg);
                    }
                }
                console.log(tianganArr, dizhiArr, cangganArr, "入团")
                // 调用获取五行能量方法
                wxNengLing({
                    tiangan: tianganArr,
                    dizhi: dizhiArr,
                    canggan: cangganArr,
                }).then((res) => {
                    console.log(res, "9999999999999999")
                    this.wxNLData.push(this.wxDataBuilder('木', res.data.nengliangRatio['mu']));
                    this.wxNLData.push(this.wxDataBuilder('火', res.data.nengliangRatio['huo']));
                    this.wxNLData.push(this.wxDataBuilder('土', res.data.nengliangRatio['tu']));
                    this.wxNLData.push(this.wxDataBuilder('金', res.data.nengliangRatio['jin']));
                    this.wxNLData.push(this.wxDataBuilder('水', res.data.nengliangRatio['shui']));

                    // 经络jingLuoData.push(jL)
                    let jlRes = res.data.jingLuoRatio;
                    this.jingLuoData.push(this.jLDataBuilder('手太阴肺经', jlRes['fei']));
                    this.jingLuoData.push(this.jLDataBuilder('手阳明大肠经', jlRes['daChang']));
                    this.jingLuoData.push(this.jLDataBuilder('足阳明胃经', jlRes['wei']));
                    this.jingLuoData.push(this.jLDataBuilder('足太阴脾经', jlRes['pi']));
                    this.jingLuoData.push(this.jLDataBuilder('手少阴心经', jlRes['xin']));
                    this.jingLuoData.push(this.jLDataBuilder('手太阳小肠经', jlRes['xiaoChang']));
                    this.jingLuoData.push(this.jLDataBuilder('足太阳膀胱经', jlRes['pangGuang']));
                    this.jingLuoData.push(this.jLDataBuilder('足少阴肾经', jlRes['shen']));
                    this.jingLuoData.push(this.jLDataBuilder('手厥阴心包经', jlRes['xinBao']));
                    this.jingLuoData.push(this.jLDataBuilder('手少阳三焦经', jlRes['sanJiao']));
                    this.jingLuoData.push(this.jLDataBuilder('足少阳胆经', jlRes['dan']));
                    this.jingLuoData.push(this.jLDataBuilder('足厥阴肝经', jlRes['gan']));

                    console.log(this.cWidth)
                    // this.getServerData();
                });
                // 求比例 用于能量
                console.log(this.wxNLData);
                console.log(this.jingLuoData);
                // this.getWxScale();

            })

        },
    }
};
</script>

<style scoped lang="scss">
.itt {
    font-size: 24px;
}

.uni-table {
    position: relative;
    width: 100%;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
    display: table;
    overflow-x: auto;
}

.uni-tr {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-around;
    border-bottom: 1px #EBEEF5 solid;
    height: 70px;
}

.charts {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
}

.chartsMain {
    width: 100%;

    height: 400px;
    background: #fffaf4;

    border-top: 2rpx solid #f2f2f2;
}


.lengend {
    width: 96%;
    height: 210px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0px 0px 5px #dccdcd;
    border-radius: 25px;
}

.left,
.right {
    display: flex;

    margin-top: 10px;
}

.content {
    display: flex;
    align-items: center;
    width: 200px;
    padding-left: 20px;
}

.color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #cbc3c3;
}

.text {

    font-size: 16px;
    padding-left: 10px;
}


.val {
    text-align: right;
    font-weight: 800;
    font-size: 17px;
    width: 50px;
}





.colors {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}


.uni-th {
    padding: 12px 10px;
    display: table-cell;
    text-align: center;
    box-sizing: border-box;
    width: 20%;
    font-size: 24px;
    font-weight: bold;
    color: #909399;

}

.uni-td {
    display: table-cell;

    font-size: 24px;

    font-weight: 400;
    color: #606266;
    line-height: 23px;
    width: 20%;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
    font-weight: bold !important;
    padding: 2px;
}



.main {
    // margin-top: 10px;

    overflow-y: 1px !important;
    background-color: #fdfdfd;
}

.container-wedao {
    display: inline-block;
    width: 100%;
    font-size: 26px;
}

.top-row-label {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    height: 50px;

    line-height: 50px;
}

.txt_canggan {
    padding: 5px;
}

.bgmt-20 {
    margin: 20px;
}



.even {
    background-color: #f4f4f4;
}

.top-row-content {
    color: #d19a56;
}

.uni-table-th {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>